<template>
    <section>
        <el-col :span="24" style="padding: 18px 2px;">
            <el-button type="primary" icon="el-icon-circle-plus" round @click="newCard()">添加</el-button>
        </el-col>
        <div>
            <el-col class="on-off-card" v-for="(device, index) in cardData">
                <el-card class="on-off-box-card">
                    <div slot="header" class="clearfix">
                        <i class="el-icon-close" @click="delCard(device)" style="float: right; position: relative; top: -10px; right: -10px"></i>
                        <el-input v-model="device['name']" placeholder="默认设备" style="left: 10px; width: 60%"></el-input>
                        <el-button type="text" style="margin-right: 10px; float:right" @click="pushCard(device)">PUSH</el-button>
                    </div>
                    <div>
                        <el-input v-model="device.code" style="width: 93%; padding: 2px 0px; margin-left: 10px"></el-input>
                    </div>
                    <div style="padding: 25px 0px">
                        <el-button type="primary" icon="el-icon-edit" style="float:right; margin-right: 5px; width: 95%"
                                   @click="updateCard(index)">确认</el-button>
                    </div>
                </el-card>
            </el-col>
        </div>
    </section>
</template>

<style>
    .on-off-card {
        padding: 15px 4px;
        width: 305px
    }
    .on-off-box-card {
        width: 280px;
        height: 235px;
    }
</style>

<script>

    import {createSwitch, getSwitchIndex, deleteSwitch, editSwitch, controlSwitch} from '../../api/api';

    export default {
        data() {
            return {
                deviceLists: [],
                cardData: {},
                from: {},
                cardType: true, //true：新增 ， false：编辑
            };
        },
        methods: {
            newCard() {
                this.from = {};
                this.from.name      = '控制器';
                this.from.code      = '控制代码';
                this.cardType       = true;
                this.addSwitch();
            },
            updateCard(index) {
                this.from = {};
                this.from.id = this.cardData[index]['id'];
                this.from.name = this.cardData[index]['name'];
                this.from.code = this.cardData[index]['code'];
                this.cardType  = false;
                this.addSwitch();
            },
            pushCard(remote) {
                controlSwitch(remote).then((res) => {
                    if (res.data.code == "OK") {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                });
            },
            getSwitch() {
                getSwitchIndex().then((res) => {
                    if (res.data.code == "OK") {
                        this.cardData = res.data.data;
                        res.data.data.map((_, index) => {
                            this.deviceLists[index] = (_['deviceLists'].length  == 0) ? [] : _['deviceLists'].map(_=>parseInt(_));
                        });
                    }
                });
            },
            changeWitch(index) {
                this.updateCard(index);
            },
            addSwitch() {
                if (this.cardType) {
                    createSwitch(this.from).then((res) => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.getSwitch();
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
                } else {
                    editSwitch(this.from).then((res) => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.getSwitch();
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
                }
            },
            delCard(remote) {
                deleteSwitch(remote).then((res) => {
                    this.$confirm('确认删除这个设备吗？', '提示', {}).then(() => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.getSwitch();
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
                });
            }
        },
        mounted() {
            this.getSwitch();
        }
    }
</script>